<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>官方预约平台 - 无忧体检网</title>
    <meta name="description" content="无忧体检中心官方预约平台 - 无忧体检网">
    <meta name="keywords" content="体检，体检中心，无忧体检预约">

    <link rel="stylesheet" th:href="@{/elementui/index.css}">
    <script th:src="@{/elementui/vue.js}"></script>
    <script th:src="@{/elementui/index.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>

    <link href="/css/reset.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/calendar.css">
    <link href="/css/swiper-3.2.7.min.css" rel="stylesheet">
    <link href="/css/custom.css" rel="stylesheet">
    <link href="/css/jingmei.css" rel="stylesheet">
    <link href="/css/pspecial.css" rel="stylesheet">
    <link href="/css/logon_new.css" rel="stylesheet">
    <!--—[if lt IE 9]-->
    <script src="/js/html5shiv.min.js"></script>
    <script src="/js/respond.min.js"></script>
    <!--[endif]—-->
    <link type="text/css" rel="stylesheet" href="/css/laydate.css">
    <link type="text/css" rel="stylesheet" href="/css/laydate_new.css" id="LayDateSkin">
</head>

<body>
<!-- Header  -->
<div id="app">
    <div class="header header_index">
        <div class="container head clear">
            <div class="headleft fl">
                <ul class="clear">
                    <li class="fl"><a href="#">预约中心首页</a></li>
                    <li class="fl"><a href="#">体检</a></li>
                    <li class="fl"><a href="#">检前</a></li>
                    <li class="fl"><a href="#">检后</a></li>
                </ul>
            </div>
            <div class="fr headright clear">
                <div class="logintips fl">
                    <a href="/toPage/login" rel="nofollow" v-if="loginUser==null">请登录</a>
                    <span class="line" v-if="loginUser==null">|</span>
                    <a href="/toPage/register" rel="nofollow" v-if="loginUser==null">免费注册</a>
                    <a href="/toPage/Personal" rel="nofollow" v-if="loginUser!=null">个人中心</a>
                    <el-dropdown v-if="loginUser!=null">
  <span class="el-dropdown-link">
    退出<i class="el-icon-s-tools"></i>
  </span>
                        <el-dropdown-menu slot="dropdown">
                            <span style="display:block;"><a href="#" @click="logout()">退出登录</a></span>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
    </div>

    <div class="main">
        <div class="mainnav container clear">
            <div class="logo fl clear">
                <a href="#" class="fl"><img src="/img/big_logo.png" class="full"></a>
            </div>
            <div class="choose fl clear">
                <div class="select_box fl clear">
                    <div class="search-dq clear">
                        <div class="search_fill fl">
                            <span class="fr num"><img src="/img/sousuo.png" class="full"></span>
                        </div>
                    </div>
                </div>
                <div class="search fl clear">
                    <div class="searchbox clear">
                        <span class="searchicon"><img src="/img/search.png"></span>
                        <input type="text" name="search_key" class="search_input fl" value="" placeholder="请输入体检套餐">
                        <input type="submit" value="搜 索" id="btn_search" name="btnSearch"
                               class="fl btn_search yf-js-keyword">
                    </div>
                    <div class="searchlink">
                        <ul class="clear">
                            <li><a href="#">入职体检</a></li>
                            <li><a href="#">员工体检</a></li>
                            <li><a href="#">父母尊享</a></li>
                            <li><a href="#">妇科检查</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="navbar navbar_check1 clear">
            <div class="container clear">
                <div class="quick_check1 fl">
                    <p class="quickchoose">体检预约中心</p>
                </div>
                <ul class="ul fl clear nav">
                    <li><a href="/">首页</a></li>
                    <li><a href="#">套餐选取</a></li>
                    <li><a href="#">医师服务</a></li>
                    <li><a href="#">高端检验</a></li>
                    <li><a href="#">员工团检</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Header End -->
    <div class="container">
        <template>
            <div style="margin-top: 10px">
                <el-row>
                    <el-col :span="24">
                        <el-card>
                            <div style="padding: 10px 0; border-bottom: 1px solid #ccc; display: flex">
                                <div style="flex: 1;font-size: 18px">个人中心</div>
                                <div style="flex: 1; text-align: right">
                                    <el-button @click="edit">修改</el-button>
                                </div>
                            </div>
                            <el-row>
                                <el-col :span="12" :offset="10">
                                    <div style="padding: 10px 0; margin-top: 20px">

                                        <el-form label-width="100px">
                                            <el-form-item label="姓名：">
                                                <div>{{ userInfo.name }}</div>
                                            </el-form-item>
                                            <el-form-item label="性别：">
                                                <div v-if="userInfo.sex==1">男</div>
                                                <div v-if="userInfo.sex==2">女</div>
                                            </el-form-item>
                                            <el-form-item label="手机号：">
                                                <div>{{ userInfo.phoneNumber }}</div>
                                            </el-form-item>
                                            <el-form-item label="邮箱：">
                                                <div>{{ userInfo.email }}</div>
                                            </el-form-item>
                                            <el-form-item label="生日：">
                                                <div>{{ userInfo.birthday }}</div>
                                            </el-form-item>
                                        </el-form>
                                    </div>

                                </el-col>
                            </el-row>

                        </el-card>
                    </el-col>
                </el-row>


                <el-dialog title="个人信息" :visible.sync="dialogFormVisible" width="30%"
                           :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
                    <el-form :model="entity">
                        <el-form-item label="姓名" label-width="100px">
                            <el-input v-model="entity.name" autocomplete="off" style="width: 80%"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" label-width="100px">
                            <el-input show-password v-model="entity.password" autocomplete="off" style="width: 80%"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" label-width="100px">
                            <el-radio v-model="entity.sex" label="1">男</el-radio>
                            <el-radio v-model="entity.sex" label="2">女</el-radio>
                        </el-form-item>
                        <el-form-item label="电话" label-width="100px">
                            <el-input v-model="entity.phoneNumber" autocomplete="off" style="width: 80%"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" label-width="100px">
                            <el-input v-model="entity.email" autocomplete="off" style="width: 80%"></el-input>
                        </el-form-item>
                        <el-form-item label="出生日期" label-width="100px">
                            <div class="block">
                                <el-date-picker
                                        v-model="entity.birthday"
                                        type="datetime"
                                        placeholder="选择日期"
                                        format="yyyy-MM-dd">
                                </el-date-picker>
                            </div>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="save">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </template>
    </div>
    <!-- Footer -->
    <div class="footer">
        <div class="container clear">
            <div class="footerdetail clear fl">
                <div class="footerlist fl">
                    <a href="javascript:;" class="footertitle" rel="nofollow">关于我们</a>
                    <ul>
                        <li><a href="#" rel="nofollow">平台简介</a></li>
                        <li><a href="#" rel="nofollow">招贤纳士</a>
                        </li>
                        <li><a href="#" rel="nofollow">联系我们</a>
                        </li>
                    </ul>
                </div>
                <div class="footerlist fl">
                    <a href="javascript:;" class="footertitle" rel="nofollow">售后服务</a>
                    <ul>
                        <li><a href="#" rel="nofollow">退款说明</a></li>
                        <li><a href="#" rel="nofollow">检后服务</a>
                        </li>
                        <li><a href="#" rel="nofollow">监督电话</a>
                        </li>
                    </ul>
                </div>
                <div class="footerlist fl">
                    <a href="javascript:;" class="footertitle" rel="nofollow">常见事项</a>
                    <ul>
                        <li><a href="#" rel="nofollow">检前须知</a>
                        </li>
                        <li><a href="#" rel="nofollow">预约流程</a>
                        </li>
                        <li><a href="#" rel="nofollow">体检流程</a>
                        </li>
                    </ul>
                </div>
                <div class="footerlist fl">
                    <a href="javascript:;" class="footertitle" rel="nofollow">新手指南</a>
                    <ul>
                        <li><a href="#" rel="nofollow">会员注册</a></li>
                        <li><a href="#" rel="nofollow">用户登录</a></li>
                        <li><a href="#" rel="nofollow">找回密码</a></li>
                    </ul>
                </div>
                <div class="footerlist fl">
                    <a href="javascript:;" class="footertitle" rel="nofollow">机构对接</a>
                    <ul>
                        <li><a href="#" rel="nofollow">渠道合作</a>
                        </li>
                        <li><a href="#" rel="nofollow">机构入驻</a>
                        </li>
                        <li><a href="#" rel="nofollow">广告服务</a>
                        </li>
                    </ul>
                </div>
                <div class="code_nav fr clear">
                    <p class="fl">持续技术支持</p>
                    <img src="/img/yg.png" class="full fl">
                </div>
            </div>
            <div class="footernum telnum fl">
                <p class="clear"><span class="fl">无忧体检</span></p>
                <h1>官方预约平台</h1>
            </div>
        </div>
        <div class="footerlink container">
            <div class="footercopy">
                <p><br>
                    <span>猿谷网络提供技术支持 @ DancingHorse600</span>
                </p>
                <p>apevale.com</p>
            </div>
        </div>
    </div>
</div>
<!--Footer End  -->

<script src="/js//crypto-aes.js"></script>
<script src="/js//crypto-mode-ecb.js"></script>
<script src="/js//crypto-pad-nopadding.js"></script>
<script src="/js//jquery-1.12.0.min.js"></script>
<script src="/js//swiper-3.2.7.jquery.min.js"></script>
<script src="/js//calendar.js"></script>
<script src="/js//commonLib.js"></script>
<script src="/js//main.js"></script>
<script src="/js//jquery.include.js"></script>
<!--<script src="/elementui//vue.js"></script>-->
<!--<script src="/https://unpkg.com/element-ui/lib/index.js"></script>-->
<!--<script src="/js//axios.min.js"></script>-->

<script>
    const url = "/member/"
    new Vue({
        el: '#app',
        data: {
            loginUser: {},
            user: {},
            userInfo: {},
            entity: {},
            dialogFormVisible: false,
            vis: false,
            // uploadUrl: 'http://localhost:18080/img/upload',
            imageUrl: '',
        },
        created() {
            this.loginUser = JSON.parse(sessionStorage.getItem("loginUser"))
            if(this.loginUser==null){
                window.location.href = "login.html"
            }
            this.load()
        },

        methods: {
            logout(){
                sessionStorage.clear()
                window.location.href = "/"
            },
            load() {
                axios.get(url + this.loginUser.id).then(res => {
                    this.userInfo = res.data.data || {}
                })
            },
            save() {
                axios.put("/member", this.entity).then(res => {
                    if (res.data.code == 20000) {
                        this.$message({
                            type: "success",
                            message: "修改成功"
                        })
                        this.dialogFormVisible = false;
                        this.load()
                    }
                })
            },
            edit() {
                this.entity = JSON.parse(JSON.stringify(this.userInfo))
                this.dialogFormVisible = true;
            },
            handleAvatarSuccess(res) {
                this.imageUrl = res.data;
                this.entity = JSON.parse(JSON.stringify(this.userInfo))
                this.entity.avatar = res.data;
                this.save()
            },
        },

    })
</script>

<script>
    $(function () {
        $('.yf-js-keyword').click(function (e) {
            var keyword = $('input[name=search_key]').val();
            if (keyword == '' || keyword == null || keyword == undefined) {
            }
            var type = $('input[name=searchType]').val();
            console.log('type' + type);
            var url = '';
            if (type == 0) {
                url = '/shop/index/index?code=plan&k=';
            } else {
                url = '/shop/index/article?code=physical&k=';
            }
            url += encodeURI(keyword);
            location.href = url;
        });

        $('input[name=search_key]').bind('keypress', function (event) {
            if (event.keyCode == "13") {
                var keyword = $('input[name=search_key]').val();
                if (keyword == '' || keyword == null || keyword == undefined) {
                    //下面两行注释 不弹出提示框 20170116 lijing
                    //alert('请输入搜索的信息');
                    //return false;
                }
                var type = $('input[name=searchType]').val();
                var url = '';
                if (type == 0) {
                    url = '/shop/index/index?code=plan&k=';
                } else {
                    url = '/shop/index/article?code=physical&k=';
                }
                url += encodeURI(keyword);
                location.href = url;
            }
        });
        var img = $('.combo-dropdown li.option-selected').find("img").attr("src");
        $("#d_select").find('img').attr("src", img);
    });
</script>

<script>
    $(function () {
        $('.yf-js-search').click(function (e) {
            e.preventDefault();
            var url = '/shop/index/index?code=plan';
            var packageKind = $('input[name=package]').val();
            if (packageKind != 0) {
                url += '&p=' + packageKind;
            }
            var price = $('input[name=price]').val();
            if (price != 0) {
                url += '&pr=' + price;
            }
            var age = $('input[name=age]').val();
            if (age != 0) {
                url += '&w=' + age;
            }
            var area = $('input[name=district]').val();
            if (area != 0) {
                url += '&ar=' + area;
            }
            var sex = $('input[name=sex]:checked').val();
            if (sex != 0) {
                url += '&se=' + sex;
            }
            location.href = url;
        });
    });
    //egg 提交定制
    $("#d_sub").click(function () {
        $(this).val("提交中...");
        var _this = $(this);
        var data = new Array();
        $("#made .option-selected").each(function () {
            var value = $(this).attr('data-value');
            if (value == 0) {
                alert("请选择" + $(this).html());
                _this.val("立即定制");
                var mychar = document.getElementById("con");
                mychar.style.display = "block";
                return;
            }
            data.push(value);
        });
        var name = $("input[name='name']").val();
        var phone = $("input[name='tel']").val();
        if (name == "" || name == "undefined") {
            alert("请输入称呼");
            _this.val("立即定制");
            var mychar = document.getElementById("con");
            mychar.style.display = "block";
            return;
        }
        if (phone == "" || phone == "undefined") {
            alert("请输入电话");
            _this.val("立即定制");
            var mychar = document.getElementById("con");
            mychar.style.display = "block";
            return;
        }
        data.push(name);
        data.push(phone);
        $.ajax({
            url: "/home/index/personal_made",
            type: "post",
            dataType: "json",
            data: {
                data: data
            },
            success: function (res) {
                alert(res.content);
                if (res.error == 1) {
                    _this.val("立即定制");
                } else {
                    window.location.reload();
                }
            },
        });
    });
</script>
<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }

    .el-form-item {
        margin-bottom: 10px;
    }
</style>

</body>
<style>
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-s-tools {
        font-size: 12px;
    }
</style>
</html>